<template>
    <view class="page">
        <view class="page-member">
            <view class="member-head">
                <view class="img">
                    <img mode="aspectFit" :src="dataDetail.logo_url" />
                    <img class="icon" :src="File_Url+'vip-icon.png'" />
                </view>

                <text>{{dataDetail.name}}</text>
            </view>
<!--            <view class="member-phone" @click="callPhone(dataDetail.contact_number)">-->
            <view class="member-phone">
                <view class="item">
                    <text class="spec">{{dataDetail.demand_count}}</text>
                    <text>发布商机</text>
                </view>
                <view class="item">
                    <text  class="spec">{{dataDetail.demand_success_butt_count}}</text>
                    <text>成功对接</text>
                </view>
            </view>
            <!--<view class="member-phone" @click="callPhone(dataDetail.contact_number)">
                <img :src="File_Url+'phone-grey.png'" />
                <text>{{dataDetail.contact_number}}</text>
            </view>-->
            <view class="member-place" @click="skipMap">
                <img :src="File_Url+'place-grey.png'" />
                <text>{{dataDetail.province[dataDetail.province.length-1]=='市'?dataDetail.province:dataDetail.province+dataDetail.city}}{{dataDetail.area+dataDetail.address}}</text>
                <img class="right" :src="File_Url+'right-grey.png'" />
            </view>
            <view class="member-range">
                <view class="range-title">业务范围</view>
                <view class="range-list">
                    <text v-for="(item,index) in dataDetail.unit_business_label" :key="index">{{item}}</text>
                </view>
            </view>
            <view class="member-desc">
                <view class="desc-title">单位简介</view>
                <view class="desc-text" v-html="dataDetail.introduction"></view>
            </view>
        </view>
        <view class="page-authority">
            <view class="page-authority-title">官方点评</view>
            <view class="page-authority-null" v-if="dataDetail.official_comment.length==0">
                <text>暂无官方点评</text>
            </view>
            <view class="page-authority-item" v-if="dataDetail.official_comment.length>0" v-for="(item,index) in dataDetail.official_comment" :key="index">
                <view class="authority-head">
                    <img :src="item.photo_url"/>
                    <text>{{item.nickname}}</text>
                </view>
                <view class="authority-content">
                    {{item.content}}
                </view>
                <view class="authority-foot">
                    <view class="foot-left">{{item.updated_at}}</view>
                    <view class="foot-right">
                        <view class="foot-right-item" @click="commentLikeAction(item.id)">
                            <img :src="File_Url+'comment-support-active.png'" v-if="item.is_like == 1" />
                            <img :src="File_Url+'comment-support.png'" v-else />
                            <text>{{item.comment_like_num}}</text>
                        </view>
<!--                        <view class="foot-right-item">-->
<!--                            <img :src="File_Url+'eyes-icon.png'" />-->
<!--                            <text>123</text>-->
<!--                        </view>-->
                    </view>
                </view>
            </view>
        </view>
        <!--<view class="page-myneeds">
            <view class="page-myneeds-title">需求动态</view>
            <view class="page-myneeds-null" v-if="needsList.length==0">
                暂无需求动态~
            </view>
            <view class="page-myneeds-item" v-if="needsList.length>0" v-for="(item,index) in needsList" :key="index"  @click="skipNeedsDetail(item.id)">
                <view class="myneeds-head">
                    <text class="needs-title">{{item.title}}</text>
                    <text :class="{'needs-status':true,'blue':item.status==0,'green':item.status==1}">{{item.status==0?'筛选中':'对接成功'}}</text>
&lt;!&ndash;                    <text class="needs-status">筛选中</text>&ndash;&gt;
                </view>
                <view class="myneeds-content">
                    <view class="myneeds-text">{{item.content}}</view>
                    <view class="myneeds-tip" v-if="item.label_arr.length>0">
                        <text v-for="(tip, ids) in item.label_arr" :key="ids">{{tip}}</text>
                    </view>
                    <view class="myneeds-img" v-if="item.img_array_url.length>0">
                        <img v-for="(url, ids) in item.img_array_url" :key="ids" :src="url" mode="aspectFill">
                    </view>
                </view>
                <view class="myneeds-foot">
                    <view class="foot-left">
                        <view class="foot-right-item">
                            <img :src="File_Url+'eyes-icon.png'" />
                            <text>{{item.browse_num}}</text>
                        </view>
                        <view class="foot-right-item">
                            <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>
                            <img :src="File_Url+'collect.png'" v-else/>
                            <text>{{item.attention_num}}</text>
                        </view>
                    </view>
                    <view class="foot-right">{{item.created_at.split(' ')[0]}}</view>
                </view>
            </view>
        </view>-->
    </view>
</template>

<script>
    export default {
        name: "MemberDetail",
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                memberId: '',
                dataDetail: {},
                needsList:[]
            }
        },
        onLoad(query){
            this.memberId = query.memberId
            this.getMemberUnitDetail();
            this.getUnitXUserDemandList();

        },
        onShareAppMessage(){
            return {
                title: '初心领航会客室',
                path: '/pages/memberUnit/MemberDetail/MemberDetail?memberId='+this.memberId
            }
        },
        methods:{
            //地址
            skipMap(){
                let str = (this.dataDetail.province[this.dataDetail.province.length-1]=='市'?this.dataDetail.province:(this.dataDetail.province+this.dataDetail.city))+this.dataDetail.area+this.dataDetail.address
                this.$map.geocoding({
                    address: str,
                    fail: function (data) {
                        uni.showToast({
                            icon: 'none',
                            title: '地址解析失败！'
                        })
                    },
                    success: function (res) {
                        let latitude = res.result.location.lat;
                        let longitude = res.result.location.lng;
                        uni.openLocation({
                            latitude,
                            longitude,
                            name: str,
                            scale: 18
                        })
                    }
                });
            },
            //获取单位详情
            async getMemberUnitDetail(){
                const res = await this.$api.getMemberUnitDetail({id:this.memberId,user_token: uni.getStorageSync('userToken')})
                if (res.data.level == 'success'){
                    let str = res.data.data;
                    if (str.introduction != null) {
                        str.introduction = str.introduction.replace(/<img[^>]*>/gi, function (match, capture) {
                            return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
                        });
                        str.introduction = str.introduction.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
                    }
                    this.dataDetail = str;
                }
            },
            //官方点评点赞
            async commentLikeAction(id){
                let params = {
                    comment_id: id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.commentLikeAction(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon: 'success',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getMemberUnitDetail();
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: res.data.message,
                        duration: 3000
                    })
                    this.getMemberUnitDetail();
                }
            },
            //获取单位所参与的需求
            async getUnitXUserDemandList(){
                let params = {
                    unit_id: this.memberId,
                    page: 1,
                    limit: 4,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.getUnitXUserDemandList(params);
                if (res.data.level == 'success'){
                    this.needsList = res.data.data
                }
            },
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
            //拨打手机号
            callPhone(number){
                uni.showModal({
                    title: '提示',
                    content: '将转到拨号界面拨打'+number+'，是否进行？',
                    success: function (res) {
                        if (res.confirm) {
                            uni.makePhoneCall({
                                phoneNumber: number
                            });
                        } else if (res.cancel) {
                            uni.showToast({
                                icon:'none',
                                title: "取消成功！"
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        background: #F8F8F8;
        min-height: 100vh;
        width: 100vw;
    }
    .page-member{
        background: #FFFFFF;
        margin-bottom: 20rpx;
        padding: 0 30rpx;
        .member-head{
            padding: 30rpx 0;
            @include flex();
            flex-direction: column;
            border-bottom: 1rpx solid #E5E5E5;
            .img{
                width: 184rpx;
                height: 184rpx;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    /*border-radius: 360rpx;*/
                }
                .icon{
                    position: absolute;
                    right: 5rpx;
                    width: 50rpx;
                    height: 50rpx;
                    bottom: 0;
                }
            }
            text{
                height: 45rpx;
                line-height: 45rpx;
                padding: 20rpx 0;
                font-size: 32rpx;
            }
        }
        .member-phone{
            padding: 36rpx 0;
            @include flex(flex-start);
            flex-direction: row;
            border-bottom: 1rpx solid #E5E5E5;
            img{
                padding: 0 10rpx;
                width: 68rpx;
                height: 48rpx;
            }
            text{
                padding: 0 20rpx;
                height: 48rpx;
                line-height: 48rpx;
                font-size: 32rpx;
                @include ellipsis(1)
            }
            .item{
                display: flex;
                flex-direction: column;
                align-items: center;
                flex: 1;
                text{
                    font-size: 26rpx;
                    line-height: 48rpx;
                }
                .spec{
                    font-weight: bold;
                    font-size: 45rpx;
                    color: #03D494;
                }
            }
        }
        .member-place{
            padding: 36rpx 0;
            @include flex(flex-start);
            flex-direction: row;
            border-bottom: 1rpx solid #E5E5E5;
            img{
                padding: 0 10rpx;
                width: 68rpx;
                height: 48rpx;
            }
            text{
                padding: 0 20rpx;
                height: 48rpx;
                line-height: 48rpx;
                font-size: 32rpx;
                @include ellipsis(1)
                max-width: 80%;
            }
            .right{
                margin-left: auto;
                padding: 0;
                width: 30rpx;
                height: 30rpx;
            }
        }
        .member-range{
            padding: 30rpx 0;
            border-bottom: 1rpx solid #E5E5E5;
            .range-title{
                height: 48rpx;
                line-height: 48rpx;
                font-size: 34rpx;
                font-weight: bold;
            }
            .range-list{
                padding: 20rpx 0;
                @include flexWrap(flex-start);
                flex-direction: row;
                text{
                    /*background: #3782FF;*/
                    height: 62rpx;
                    line-height: 62rpx;
                    border-radius: 10rpx;
                    color: #979696;
                    padding: 0 25rpx;
                    margin-right: 20rpx;
                    font-size: 30rpx;
                }
            }
        }
        .member-desc{
            padding: 30rpx 0;
            .desc-title{
                height: 48rpx;
                line-height: 48rpx;
                font-size: 34rpx;
                font-weight: bold;
            }
            .desc-text{
                line-height: 42rpx;
                font-size: 30rpx;
                min-height: 42rpx;
                margin: 20rpx 0;
            }
        }
    }
    .page-authority{
        background: #FFFFFF;
        margin-bottom: 20rpx;
        .page-authority-title{
            border-bottom: 2rpx solid #F1F1F1;
            padding: 20rpx 30rpx;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 34rpx;
            font-weight: bold;
        }
        .page-authority-null{
            padding: 40rpx ;
            text-align: center;
            height: 40rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            color: #B5B5B5;
        }
        .page-authority-item{
            padding: 20rpx;
            .authority-head{
                @include flex(flex-strat);
                flex-direction: row;
                img{
                    width: 50rpx;
                    height: 50rpx;
                    margin-right: 10rpx;
                    border-radius: 360rpx;
                }
                text{
                    height: 50rpx;
                    line-height: 50rpx;
                    font-size: 24rpx;
                    font-weight: bold;
                }
            }
            .authority-content{
                padding: 0 10rpx;
                font-size: 24rpx;
                line-height: 33rpx;
                max-height: 66rpx;
                margin: 20rpx 0;
                @include ellipsis(2);
            }
            .authority-foot{
                @include flex(flex-start);
                flex-direction: row;
                padding: 0 10rpx;
                .foot-left{
                    color: #9B9B9B;
                    font-size: 24rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                }
                .foot-right{
                    margin-left: auto;
                    @include flex(flex-start);
                    flex-direction: row;
                    .foot-right-item{
                        @include flex(flex-start);
                        flex-direction: row;
                        margin-left: 20rpx;
                        img{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }
                        text{
                            color: #9B9B9B;
                            font-size: 24rpx;
                            line-height: 40rpx;
                            height: 40rpx;
                        }
                    }
                }
            }
        }
    }
    .page-myneeds{
        background: #FFFFFF;
        .page-myneeds-title{
            border-bottom: 2rpx solid #F1F1F1;
            padding: 20rpx 30rpx;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 34rpx;
            font-weight: bold;
        }
        .page-myneeds-null{
            padding: 40rpx ;
            text-align: center;
            height: 40rpx;
            line-height: 40rpx;
            font-size: 28rpx;
            color: #B5B5B5;
        }
        .page-myneeds-item{
            padding: 20rpx 30rpx;
            .myneeds-head{
                @include flex(flex-strat);
                flex-direction: row;
                text{
                    height: 45rpx;
                    line-height: 45rpx;
                }
                .needs-title{
                    font-size: 32rpx;
                    font-weight: bold;
                }
                .needs-status{
                    margin-left: auto;
                    font-size: 28rpx;
                }
                .blue{
                    color: #3782FF;
                }
                .green{
                    color: #00C735;
                }
                .red{
                    color: #FF6565;
                }
            }
            .myneeds-content{
                padding: 16rpx 0;
                .myneeds-text{
                    font-size: 26rpx;
                    line-height: 37rpx;
                    max-height: 111rpx;
                    margin-bottom: 16rpx;
                    @include ellipsis(3);
                }
                .myneeds-tip{
                    @include flex(flex-start);
                    flex-direction: row;
                    text{
                        height: 40rpx;
                        line-height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        color: #FFFFFF;
                        margin-right: 10rpx;
                    }
                }
                .myneeds-img{
                    @include flexWrap(flex-start);
                    flex-direction: row;
                    padding: 20rpx 0;
                    img{
                        width: calc((100% - 36rpx)/3);
                        height: 140rpx;
                        margin: 6rpx;
                        border-radius: 4rpx;
                    }
                    img:last-child{
                        margin-right: 0;
                    }
                }
            }
            .myneeds-foot{
                @include flex(flex-start);
                flex-direction: row;
                .foot-left{
                    @include flex(flex-start);
                    flex-direction: row;
                    .foot-right-item{
                        @include flex(flex-start);
                        flex-direction: row;
                        margin-right: 20rpx;
                        img{
                            width: 40rpx;
                            height: 40rpx;
                            margin-right: 10rpx;
                        }
                        text{
                            color: #9B9B9B;
                            font-size: 24rpx;
                            line-height: 40rpx;
                            height: 40rpx;
                        }
                    }
                }
                .foot-right{
                    margin-left: auto;
                    color: #9B9B9B;
                    font-size: 24rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                }
            }
        }
    }
</style>
